<template>
  <div id="body">
    <div id="saizhi">
      <div class="htitle">
        <strong>球员介绍</strong>
      </div>
    </div>
    <div class="data" id="mainTitle">
      <table class="tdlink" cellspacing="0" cellpadding="5" width="100%" border="1">
                    <tbody><tr>
                        <td align="center" width="200" bgcolor="#ffffff" rowspan="10">
                            <table cellspacing="0" cellpadding="0" width="94%" border="0">
                                <tbody><tr>
                                    <td align="center" style="width:180px; height:230px;"><img height="230" width="180" alt="" :src="playertabledata.playerImg" id="imgPhoto" border="1"></td>
                                </tr>
                            </tbody></table>
                        </td>
                        <td align="right" width="100" bgcolor="#eff4fa" height="21"><span class="STYLE13">姓名：</span></td>
                        <td width="195" bgcolor="#fbfbfb"><strong>{{playertabledata.playerName}}</strong></td>
                        <td width="100" align="right" bgcolor="#eff4fa"><span class="STYLE13">年龄：</span></td>
                        <td width="195" bgcolor="#fbfbfb"><span class="STYLE13"><strong>{{playertabledata.playerAge}}</strong>&nbsp;</span></td>
                    </tr>

                    <tr>
                        <td align="right" bgcolor="#eff4fa" height="21"><span class="STYLE13">身高：</span></td>
                        <td bgcolor="#fbfbfb"><span class="STYLE13"><strong>{{playertabledata.playerHeight}}cm</strong></span></td>
                        <td align="right" bgcolor="#eff4fa" height="20"><font color="#333333">体重</font>：</td>
                        <td bgcolor="#fbfbfb"><strong><span class="STYLE13"><strong>{{playertabledata.playerWeight}}kg</strong></span></strong></td>
                    </tr>
                    <tr>
                        <td align="right" bgcolor="#eff4fa" height="20"><font color="#333333">身价</font>：</td>
                        <td bgcolor="#fbfbfb"><strong><span class="STYLE13"><strong>{{playertabledata.playerValue}}万英镑</strong></span></strong></td>
                        <td align="right" bgcolor="#eff4fa" height="21">惯用脚</td>
                        <td bgcolor="#fbfbfb"><strong v-if="playertabledata.playerAbility">{{playertabledata.playerAbility.habitual}}</strong></td>
                    </tr>
                    <tr>
                        <td align="right" bgcolor="#eff4fa" height="21"><span class="STYLE13"><font style="background-color: #eff4fa" color="#000000">国籍</font>：</span></td>
                        <td bgcolor="#fbfbfb"><span class="STYLE13"><strong>{{playertabledata.playerNation}}</strong></span></td>
                        <td align="right" bgcolor="#eff4fa" height="21">所属球队</td>
                        <td bgcolor="#fbfbfb"><strong v-if="playertabledata.team"><a class="testA" @click="TeamDetail(playertabledata.team.id)">{{playertabledata.team.teamName}}</a></strong></td>
                    </tr>
                </tbody></table>
    </div>
    <div id="saizhi">
      <div class="htitle">
        <strong>球员能力</strong>
      </div>
    </div>

    <div id="exhibitor114" style="float:inherit" > 
        <div id="exhibitorleft" ref="chart1">
        </div>

        <div id="exhibitorright" ref="chart2">
                 
        </div> 
      </div> 





    <div id="saizhi">
      <div class="htitle">
        <strong>效力球队</strong>
      </div>
    </div>

    <div class="data" id="nowTeamDiv" style="width:100%;">
       <table class="tdlink" cellspacing="0" cellpadding="5" width="100%" border="1">
        <tbody>
          <tr>
            <td align="center" width="150" bgcolor="#d1e2f5"><strong>现效力球队</strong></td>
            <td align="center" width="156" bgcolor="#d1e2f5" height="18">
              <span class="STYLE4 STYLE9"><strong>球衣号码</strong></span>
            </td>
            <td align="center" width="151" bgcolor="#d1e2f5">
              <span class="STYLE14"><strong>位置</strong></span></td>
            </tr><tr><td align="center" bgcolor="#ffffff" v-if="playertabledata.team"><a class="testA"   @click="TeamDetail(playertabledata.team.id)">{{playertabledata.team.teamName}}</a></td>
              <td align="center" bgcolor="#ffffff">{{playertabledata.playerNumber}} </td>
              <td align="center" bgcolor="#ffffff">{{playertabledata.playerPosition}}</td>
            </tr>
            </tbody>
          </table>
        </div>


    <div id="saizhi">
      <div class="htitle">
        <strong>数据统计</strong>
      </div>
    </div>

    <el-select
        v-model="leagueId"
        clearable
        placeholder="联赛"
        style="width: 200px; margin-right: 10px"
      >
        <el-option
          v-for="item in leagueList"
          :key="item.id"
          :label="item.leagueName"
          :value="item.id"
        >
          {{ item.leagueName }}
        </el-option>
      </el-select>

      <el-button class="ml-5" icon="el-icon-search" circle @click="searchdata"
        >查询</el-button
      >
      <el-button icon="el-icon-remove" circle @click="reset">查询全部</el-button>

      <el-table
        :data="playerdatatabledata"
        border
        stripe
        :header-cell-class-name="'headerBg'"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="gamesPlayed" label="赛"></el-table-column>
        <el-table-column prop="totalGoal" label="进球"></el-table-column>
        <el-table-column prop="totalAssist" label="助攻"></el-table-column>
        <el-table-column prop="totalFoul" label="犯规"></el-table-column>
        <el-table-column prop="totalBefouled" label="被犯规"></el-table-column>
        <el-table-column prop="totalPreemption" label="抢断"></el-table-column>
        <el-table-column prop="totalOffside" label="越位"></el-table-column>
        <el-table-column prop="totalYcard" label="黄牌"></el-table-column>
        <el-table-column prop="totalRcard" label="红牌"></el-table-column>
        <el-table-column label="射门（射正）">
          <template slot-scope="scope">
            <div v-if="scope.row.totalShoot">
              {{ scope.row.totalShoot }}({{ scope.row.totalOntarget }})
            </div>
          </template>
        </el-table-column>
        <el-table-column label="传球（成功）">
          <template slot-scope="scope">
            <div v-if="scope.row.totalPass">
              {{ scope.row.totalPass }}({{ scope.row.totalOkpass }})
            </div>
          </template>
        </el-table-column>
        <el-table-column label="过人(成功)">
          <template slot-scope="scope">
            <div v-if="scope.row.totalSurpass">
              {{ scope.row.totalSurpass }}({{ scope.row.totalOksurpass }})
            </div>
          </template>

        </el-table-column>
      </el-table>

      <el-table
        :data="playerdatatabledata"
        border
        stripe
        :header-cell-class-name="'headerBg'"
        @selection-change="handleSelectionChange"
      >
        <el-table-column prop="averageGoal" label="场均进球"></el-table-column>
        <el-table-column prop="averageAssist" label="场均助攻"></el-table-column>
        <el-table-column prop="averagePreemption" label="场均抢断"></el-table-column>
        <el-table-column prop="averageOffside" label="场均越位"></el-table-column>
        <el-table-column prop="averageFoul" label="场均犯规"></el-table-column>
        <el-table-column prop="averageBefouled" label="场均被犯规"></el-table-column>
        <el-table-column prop="averageYcard" label="场均黄牌"></el-table-column>
        <el-table-column prop="averageRcard" label="场均红牌"></el-table-column>
        <el-table-column label="场均射门（射正）">
          <template slot-scope="scope">
            <div v-if="scope.row.averageShoot">
              {{ scope.row.averageShoot }}({{ scope.row.averageOntarget }})
            </div>
          </template>
        </el-table-column>
        <el-table-column label="场均传球（成功）">
          <template slot-scope="scope">
            <div v-if="scope.row.averagePass">
              {{ scope.row.averagePass }}({{ scope.row.averageOkpass }})
            </div>
          </template>
        </el-table-column>
        <el-table-column label="场均过人(成功)">
          <template slot-scope="scope">
            <div v-if="scope.row.averageSurpass">
              {{ scope.row.averageSurpass }}({{ scope.row.averageOksurpass }})
            </div>
          </template>

        </el-table-column>
      </el-table>
    

    <div id="saizhi">
      <div class="htitle">
        <strong>球员赛程</strong>
      </div>
    </div>

    <el-table
        :data="playergametabledata"
        border
        stripe
        :header-cell-class-name="'headerBg'"
        @selection-change="handleSelectionChange"
        @row-click="GameDetails"
      >
        <el-table-column label="联赛">
          <template slot-scope="scope">
            <div v-if="scope.row.league.leagueName">
              {{ scope.row.league.leagueName }}第{{ scope.row.gameRounds }}轮
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="gameTime" label="时间"></el-table-column>
        <el-table-column
          prop="hometeaminfo.teamName"
          label="主队"
        >
      
      
      </el-table-column>
        <el-table-column label="比分">
          <template slot-scope="scope">
            <div v-if="scope.row.gameData" :class="winorlose(scope.row)">
              {{ scope.row.gameData.homeGoal }}-{{
                scope.row.gameData.awayGoal
              }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="awayteaminfo.teamName"
          label="客队"
        ></el-table-column>
        <el-table-column
          prop="playerDataSingle.singleGoal"
          label="进球"
        ></el-table-column>
        <el-table-column
          prop="playerDataSingle.singleAssist"
          label="助攻"
        ></el-table-column>
        <el-table-column
          prop="playerDataSingle.singleFoul"
          label="犯规"
        ></el-table-column>

        <el-table-column
          prop="playerDataSingle.singleYcard"
          label="黄牌"
        ></el-table-column>
        <el-table-column
          prop="playerDataSingle.singleRcard"
          label="红牌"
        ></el-table-column>
        <el-table-column label="射门(射正)">
          <template slot-scope="scope">
            <div v-if="scope.row.playerDataSingle">
              {{ scope.row.playerDataSingle.singleShoot }}({{
                scope.row.playerDataSingle.singleOntarget
              }})
            </div>
          </template>
        </el-table-column>
        <el-table-column label="传球(成功)">
          <template slot-scope="scope">
            <div v-if="scope.row.playerDataSingle">
              {{ scope.row.playerDataSingle.singlePass }}({{
                scope.row.playerDataSingle.singleOkpass
              }})
            </div>
          </template>
        </el-table-column>
        <el-table-column
          label="过人(成功)"
        >
        <template slot-scope="scope">
            <div v-if="scope.row.playerDataSingle">
              {{ scope.row.playerDataSingle.singleSurpass }}({{
                scope.row.playerDataSingle.singleOksurpass
              }})
            </div>
          </template>
      
      </el-table-column>
      </el-table>

      <div id="saizhi">
        <div class="htitle">
          <strong>赛程数据变化</strong>
        </div>
      </div>

      <div id="chartp1all" >
      <div id="chartp1left" ref="linechart1"></div>
      <div id="chartp1right" ref="linechart2"></div>
      </div>
      <div id="chartp2all">
      <div id="chartp2left" ref="linechart3"></div>
      <div id="chartp2right" ref="linechart4"></div>
      </div>


    
    </div>
</template>

<script>
import * as echarts from 'echarts'
export default {
  name:"PlayerDetail",
  data(){
    return{
      playerId:"",//球员id
      leagueId:"",//联赛id
      playertabledata:[],//球员详细信息 包括球员能力 
      playerdatatabledata:[],//球员赛季数据信息
      playergametabledata:[],//球员赛程信息
      leagueList:[]//球员参加的联赛列表
    }
  },
  computed:{
    winorlose(){
      return function(data){
      if(data.gameData.homeGoal>data.gameData.awayGoal){
        return "win";
      }else if(data.gameData.homeGoal==data.gameData.awayGoal){
        return "flatten";
      }else{
        return "lose";
      }
      }
    }
  },
  created(){
    this.playerId = this.$route.query.id;
    console.log(this.$route);
    console.log(this.playerId);
    this.load()
    this.searchdata()
  },
  mounted(){


var option = {
  color: ['#67F9D8', '#FFE434', '#56A3F1', '#FF917C'],
  title: {
    text: '六维能力值'
  },

  radar: 
    {
      indicator: [
        { text: '速度', max: 100 },
        { text: '力量', max: 100 },
        { text: '射门', max: 100 },
        { text: '传球', max: 100 },
        { text: '盘带', max: 100 },
        { text: '技巧', max: 100 }
      ],
      center: ['50%', '50%'],
      radius: 100,
      axisName: {
        color: '#fff',
        backgroundColor: '#666',
        borderRadius: 3,
        padding: [3, 5]
      }
    }
  ,
  series: [
    {
      type: 'radar',
      data: [
        {
          value: [],
          name: '1',
          symbol: 'rect',
          symbolSize: 12,
          lineStyle: {
            type: 'solid'
          },
          label: {
            show: true,
            formatter: function (params) {
              return params.value;
            }
          }
        }
      ]
    }
  ]
};
const seriesLabel = {
      show: true
    };

var option1 = {
      title: {
        text: '球员能力值'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: [ '团队合作','守门','弹跳','头球','体能','任意球','防守能力','进攻能力','综合能力']
      },
      series: [
        {
          name: '参数',
          type: 'bar',//柱状图
          data: [],
          label: seriesLabel
        },
      ]
    };


//六维图
this.request.get("/echarts/front/playerAbilitysix",{
      params:{
        playerId:this.playerId
      }
    }).then(res=>{
      option.series[0].data[0].value=res.data.count;
      console.log(option.series[0].data[0])
      console.log(res.data.count)
      //option.series[1].data=res.data.count;
      this.$nextTick(() => {
        var myChart = echarts.init(this.$refs.chart2);
        myChart.setOption(option)
      })
    }),
    //其他能力柱体图
    this.request.get("/echarts/front/playerAbility",{
      params:{
        playerId:this.playerId
      }
    }).then(res=>{
      option1.series[0].data=res.data.count;
      console.log(option1.series[0].data)
      console.log(res.data.count)
      //option.series[1].data=res.data.count;
      this.$nextTick(() => {
        var myChart = echarts.init(this.$refs.chart1);
        myChart.setOption(option1)
      })
    })


  },
  methods:{
    load(){
      //球员信息
      this.request.get("/player/front/getplayerbyid",{
        params:{
          playerId:this.playerId
        }
      }).then(res=>{
        console.log(res.data)
        this.playertabledata=res.data
      })
    },
    searchdata(){
      //获取球员参加的联赛
      this.request.get("/player/front/getplayerleague",{
        params:{
          playerId:this.playerId
        }
      }).then(res=>{
        console.log(res.data)
        this.leagueList=res.data
      }),
      //球员赛季数据
      this.request.get("/player/front/getplayerdata",{
        params:{
          playerId:this.playerId,
          leagueId:this.leagueId
        }
      }).then(res=>{
        this.playerdatatabledata=[]
        console.log(res.data)
        this.playerdatatabledata.push(res.data)
      }),
      //球员赛程
      this.request.get("/player/front/getplayergame",{
        params:{
          playerId:this.playerId,
          leagueId:this.leagueId
        }
      }).then(res=>{
        console.log(res.data)
        this.playergametabledata=res.data
      })

      this.linechart()
    },


    //球员赛程数据变化折线图
    linechart(){
      var playeroption1 = {
        title:{
          text:'进攻数据变化'
        },
        tooltip:{
              trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
              axisPointer: {// 坐标轴指示器，坐标轴触发有效
                type: 'line' // 默认为直线，可选为：'line' | 'shadow'
              }
        },
        legend: {},
        xAxis: {
          type: 'category',
          data: [],
          axisLabel: {
                interval:0,//代表显示所有x轴标签显示
            }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '进球',
            data: [],
            type: 'line',
          },
          {
            name: '助攻',
            data: [],
            type: 'line',
          },
          {
            name: '射门',
            data: [],
            type: 'line'
          },
          {
            name: '射正',
            data: [],
            type: 'line'
          },
        ]
      };


      var playeroption2 = {
        title:{
          text:'防守数据变化'
        },
        tooltip:{
              trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
              axisPointer: {// 坐标轴指示器，坐标轴触发有效
                type: 'line' // 默认为直线，可选为：'line' | 'shadow'
              }
        },
        legend: {},
        xAxis: {
          type: 'category',
          data: [],
          axisLabel: {
                interval:0,//代表显示所有x轴标签显示
            }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '抢断',
            data: [],
            type: 'line',
          },
          {
            name: '越位',
            data: [],
            type: 'line',
          },
          {
            name: '犯规',
            data: [],
            type: 'line',
          },
          {
            name: '被犯规',
            data: [],
            type: 'line'
          },
          {
            name: '黄牌',
            data: [],
            type: 'line'
          },
          {
            name: '红牌',
            data: [],
            type: 'line'
          },
        ]
      };
      var playeroption3 = {
        title:{
          text:'过人数据变化'
        },
        tooltip:{
              trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
              axisPointer: {// 坐标轴指示器，坐标轴触发有效
                type: 'line' // 默认为直线，可选为：'line' | 'shadow'
              }
        },
        legend: {},
        xAxis: {
          type: 'category',
          data: [],
          axisLabel: {
                interval:0,//代表显示所有x轴标签显示
            }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '尝试过人',
            data: [],
            type: 'line',
            label:{
              show:true,
              position:'bottom',
              textstyle:{
                fontSize:8
              }
            }
          },
          {
            name: '成功过人',
            data: [],
            type: 'line',
            label:{
              show:true,
              position:'bottom',
              textstyle:{
                fontSize:8
              }
            }
          },
        ]
      };

      var playeroption4 = {
        title:{
          text:'传球数据变化'
        },
        tooltip:{
              trigger: 'axis', //坐标轴触发，主要在柱状图，折线图等会使用类目轴的图表中使用
              axisPointer: {// 坐标轴指示器，坐标轴触发有效
                type: 'line' // 默认为直线，可选为：'line' | 'shadow'
              }
        },
        legend: {},
        xAxis: {
          type: 'category',
          data: [],
          axisLabel: {
                interval:0,//代表显示所有x轴标签显示
            }
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '传球',
            data: [],
            type: 'line',
            label:{
              show:true,
              position:'bottom',
              textstyle:{
                fontSize:8
              }
            }
          },
          {
            name: '成功传球',
            data: [],
            type: 'line',
            label:{
              show:true,
              position:'bottom',
              textstyle:{
                fontSize:8
              }
            }
          },
        ]
      };
      this.request.get("/echarts/front/getplayergamechange",{
        params:{
          playerId:this.playerId,
          leagueId:this.leagueId
        }
      }).then(res=>{
        console.log("222222222222222222222224444444444444444444444444")
        console.log(res.data)
        playeroption1.xAxis.data=res.data.map(item=>item.league.leagueName+"第"+item.game.gameRounds+"轮")
        playeroption2.xAxis.data=res.data.map(item=>item.league.leagueName+"第"+item.game.gameRounds+"轮")
        playeroption3.xAxis.data=res.data.map(item=>item.league.leagueName+"第"+item.game.gameRounds+"轮")
        playeroption4.xAxis.data=res.data.map(item=>item.league.leagueName+"第"+item.game.gameRounds+"轮")

        playeroption1.series[0].data=res.data.map(item=>item.singleGoal)
        playeroption1.series[1].data=res.data.map(item=>item.singleAssist)
        playeroption1.series[2].data=res.data.map(item=>item.singleShoot)
        playeroption1.series[3].data=res.data.map(item=>item.singleOntarget)

        playeroption2.series[0].data=res.data.map(item=>item.singlePreemption)
        playeroption2.series[1].data=res.data.map(item=>item.singleOffside)
        playeroption2.series[2].data=res.data.map(item=>item.singleFoul)
        playeroption2.series[3].data=res.data.map(item=>item.singleBefouled)
        playeroption2.series[4].data=res.data.map(item=>item.singleYcard)
        playeroption2.series[5].data=res.data.map(item=>item.singleRcard)

        playeroption3.series[0].data=res.data.map(item=>item.singleSurpass)
        playeroption3.series[1].data=res.data.map(item=>item.singleOksurpass)

        playeroption4.series[0].data=res.data.map(item=>item.singlePass)
        playeroption4.series[1].data=res.data.map(item=>item.singleOkpass)

        this.$nextTick(() => {
        var chartName1 = echarts.init(this.$refs.linechart1);
        chartName1.setOption(playeroption1)

        var chartName2 = echarts.init(this.$refs.linechart2);
        chartName2.setOption(playeroption2)

        var chartName3 = echarts.init(this.$refs.linechart3);
        chartName3.setOption(playeroption3)

        var chartName4 = echarts.init(this.$refs.linechart4);
        chartName4.setOption(playeroption4)

      })
      })



    },
    handleSelectionChange(val) {
      console.log(val);
      this.multipleSelection = val;
    },
    reset() {
      this.leagueId = "";
      this.load();
      this.searchdata();
    },
    TeamDetail(id) {
       this.$router.push({
          path: '/front/teamdetail',
          query: {
            id: id
          }
        })
    },
    GameDetails(row,event,column){
      console.log(row, event, column)
      console.log(row.id)
      this.$router.push({
          path: '/front/GameDetail',
          query: {
            id: row.id
          }
        })
    },
    PlayerDetail(id) {
       this.$router.push({
          path: '/front/playerdetail',
          query: {
            id: id
          }
        })
    },
  }

}
</script>

<style>
#saizhi {
  border: 1px solid #e5e5e5;
  margin-top: 8px;
  clear: both;
}
.htitle {
  line-height: 35px;
  text-align: center;
  font-size: 14px;
  background-color: #f0f0f0;
  position: relative;
}
#exhibitor114{ 
  margin:0 auto;
  width:100%;
  height:300px
} 
#exhibitorleft{ 
  float:left;
  width:60%; 
  height:100%; 
  background:#eeeeee;
  border: 1px solid #e5e5e5;
} 
#exhibitorright{ 
  float:right; 
  width:40%;
  height:100%;
  border: 1px solid #e5e5e5;
} 
.testA{
  color: #005eb8;
}
.testA:hover{
  cursor: pointer;
}

#chartp1all{ 
  margin:0 auto;
  width:100%;
  height:300px
} 
#chartp1left{ 
  float:left;
  width:50%; 
  height:100%; 
  background:white;
  border: 1px solid #e5e5e5;
} 
#chartp1right{ 
  float:right; 
  width:50%;
  height:100%;
  border: 1px solid #e5e5e5;
  background: white;
} 
#chartp2all{ 
  margin:0 auto;
  width:100%;
  height:300px
} 
#chartp2left{ 
  float:left;
  width:50%; 
  height:100%; 
  background:white;
  border: 1px solid #e5e5e5;
} 
#chartp2right{ 
  float:right; 
  width:50%;
  height:100%;
  border: 1px solid #e5e5e5;
  background: white;
} 
.win{
  font-size: 20px;
  color:green;
}
.flatten{
  font-size: 20px;
  color:#005eb8;
}
.lose{
  font-size: 20px;
  color:red
}
</style>